const cardArray = [
    {
        name: 'bear',
        img: 'images/bear.png'
    },
    {
        name: 'christmas',
        img: 'images/christmas.jpg'
    },
    {
        name: 'dog',
        img: 'images/dog.png'
    },
    {
        name: 'drawingcat',
        img: 'images/drawingcat.jpg'
    },
    {
        name: 'nailart',
        img: 'images/nailart.jpg'
    },
    {
        name: 'olives',
        img: 'images/olives.png'
    },
    {
        name: 'penguin',
        img: 'images/penguin.png'
    },
    {
        name: 'unicorn',
        img: 'images/unicorn.png'
    },
    {
        name: 'bear',
        img: 'images/bear.png'
    },
    {
        name: 'christmas',
        img: 'images/christmas.jpg'
    },
    {
        name: 'dog',
        img: 'images/dog.png'
    },
    {
        name: 'drawingcat',
        img: 'images/drawingcat.jpg'
    },
    {
        name: 'nailart',
        img: 'images/nailart.jpg'
    },
    {
        name: 'olives',
        img: 'images/olives.png'
    },
    {
        name: 'penguin',
        img: 'images/penguin.png'
    },
    {
        name: 'unicorn',
        img: 'images/unicorn.png'
    }
]

cardArray.sort(() => 0.5 - Math.random());

const gridDisplay = document.querySelector('#grid');
const resultDisplay = document.querySelector('#result');
const cardsWon = [];
let cardsChosen = [];
let cardsChosenIds = [];
let clickCounts = 0;


function createBoard() {
    for (let i = 0; i < cardArray.length; i++) {
        const card = document.createElement('img');
        card.setAttribute('src', 'images/backside.png');
        card.setAttribute('data-id', i);
        card.addEventListener('click', flipCard);
        gridDisplay.appendChild(card);
    }
}

createBoard();

function checkMatch() {
    const cards = document.querySelectorAll('img');
    const optionOneId = cardsChosenIds[0];
    const optionTwoId = cardsChosenIds[1];

    // move this checking in flipCard.
    if (optionOneId === optionTwoId) {
        console.info('Clicked the same card!');
    }

    if (cardsChosen[0] === cardsChosen[1]) {
        cards[optionOneId].removeEventListener('click', flipCard);
        cards[optionTwoId].removeEventListener('click', flipCard);
        cardsWon.push(...cardsChosen);
        console.log(cardsWon);
    } else {
        cards[optionOneId].setAttribute('src', 'images/backside.png');
        cards[optionTwoId].setAttribute('src', 'images/backside.png');
    }
    cardsChosen = [];
    cardsChosenIds = [];
    if (cardsWon.length === cardArray.length) {
        resultDisplay.innerHTML = `Congratulations! Your clicks:${clickCounts}`;
    }
}

function flipCard() {
    let cardId = this.getAttribute('data-id');    
    if (cardsChosenIds.includes(cardId) || cardsChosenIds.length >= 2) return;
    clickCounts++;
    resultDisplay.innerHTML = `${clickCounts}`;
    cardsChosen.push(cardArray[cardId].name);
    cardsChosenIds.push(cardId);
    this.setAttribute('src', cardArray[cardId].img);
    if (cardsChosen.length === 2) {
        setTimeout(checkMatch, 600);
    }
}